<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>彻底搞懂white-space、word-break、word-wrap | 顾伊凡</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是经常搞混，所以今天我们就把这三个属性彻底搞清楚。 测试代码(文末有本文中所有例子的代码)下面是本文中用于测试各个样式展现情况的html代码：1234567&amp;lt;div id=&quot;box&quot;&amp;gt;  Hi&amp;amp;nbsp;&amp;amp;nbsp;,  Thi">
<meta name="keywords" content="css,white-space,word-break,word-wrap,html">
<meta property="og:type" content="article">
<meta property="og:title" content="彻底搞懂white-space、word-break、word-wrap">
<meta property="og:url" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/index.html">
<meta property="og:site_name" content="顾伊凡">
<meta property="og:description" content="white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是经常搞混，所以今天我们就把这三个属性彻底搞清楚。 测试代码(文末有本文中所有例子的代码)下面是本文中用于测试各个样式展现情况的html代码：1234567&amp;lt;div id=&quot;box&quot;&amp;gt;  Hi&amp;amp;nbsp;&amp;amp;nbsp;,  Thi">
<meta property="og:locale" content="default">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/init.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_nowrap.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre-wrap.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre-line.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-break_keep-all.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-break_break-all.png">
<meta property="og:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-wrap_break-word.png">
<meta property="og:updated_time" content="2018-08-31T09:28:56.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="彻底搞懂white-space、word-break、word-wrap">
<meta name="twitter:description" content="white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是经常搞混，所以今天我们就把这三个属性彻底搞清楚。 测试代码(文末有本文中所有例子的代码)下面是本文中用于测试各个样式展现情况的html代码：1234567&amp;lt;div id=&quot;box&quot;&amp;gt;  Hi&amp;amp;nbsp;&amp;amp;nbsp;,  Thi">
<meta name="twitter:image" content="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/init.png">
  
    <link rel="alternate" href="/atom.xml" title="顾伊凡" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">顾伊凡</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-彻底搞懂white-space、word-break、word-wrap" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/" class="article-date">
  <time datetime="2018-08-31T06:08:36.000Z" itemprop="datePublished">2018-08-31</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      彻底搞懂white-space、word-break、word-wrap
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是经常搞混，所以今天我们就把这三个属性彻底搞清楚。</p>
<h2 id="测试代码"><a href="#测试代码" class="headerlink" title="测试代码"></a>测试代码</h2><p><strong>(文末有本文中所有例子的代码)</strong><br>下面是本文中用于测试各个样式展现情况的html代码：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">  Hi&amp;nbsp;&amp;nbsp;,</span><br><span class="line">  This   is a incomprehensibilities long word.</span><br><span class="line">  <span class="tag">&lt;/<span class="name">br</span>&gt;</span></span><br><span class="line">  你好&amp;nbsp;&amp;nbsp;，</span><br><span class="line">  这   是一个不可思议的长单词</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><br>现在只给了它一个宽度和边框，没有其它任何样式，下面是它目前的展现情况：<br><img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/init.png" class="myImg" width="180"><br>可以看到，<code>nbsp;</code>和<code>&lt;/br&gt;</code>可以正常发挥作用，而连续的空格会被缩减成一个（比如This和is之间的三个空格），换行符也全都无效。句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界。<br>接下来我们看下， 给它上面三个css属性赋值后会出现什么变化。</p>
<h2 id="white-space"><a href="#white-space" class="headerlink" title="white-space"></a>white-space</h2><p>正如它的名字，<strong>这个属性是用来控制空白字符的显示的</strong>，同时还能控制是否自动换行。它有五个值：<code>normal | nowrap | pre | pre-wrap | pre-line</code>。因为默认是<code>normal</code>，所以我们主要研究下其它四种值时的展现情况。</p>
<p>（为了方便比较，下文所有图，左侧为<code>normal</code>即初始情况，右侧为赋上相应值时的情况）</p>
<p>先看下<code>white-space:nowrap</code>时的情况：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_nowrap.png" width="500">
<p>不仅空格被合并，换行符无效，连原本的自动换行都没了！只有<code>&lt;/br&gt;</code>才能导致换行！所以这个值的表现还是挺简单的，我们可以理解为<code>永不换行</code>。</p>
<p><code>white-space:pre</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre.png" width="500">
<p>空格和换行符全都被保留了下来！不过自动换行还是没了。保留，所以<code>pre</code>其实是<code>preserve</code>的缩写，这样就好记了。</p>
<p><code>white-space:pre-wrap</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre-wrap.png" width="335">
<p>显然<code>pre-wrap</code>就是<code>preserve</code>+<code>wrap</code>，保留空格和换行符，且可以自动换行。</p>
<p><code>white-space:pre-line</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/white-space_pre-line.png" width="335">
<p>空格被合并了，但是换行符可以发挥作用，<code>line</code>应该是<code>new line</code>的意思，自动换行还在，所以<code>pre-line</code>其实是<code>preserve</code>+<code>new line</code>+<code>wrap</code>。</p>
<p><strong>我整理了一个表予以总结：</strong></p>
<table>
<thead>
<tr>
<th>是否能发挥作用</th>
<th>换行符</th>
<th>空格</th>
<th>自动换行</th>
<th>&lt;/br&gt;、nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>×</td>
<td>×（合并）</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>nowrap</td>
<td>×</td>
<td>×（合并）</td>
<td>×</td>
<td>√</td>
</tr>
<tr>
<td>pre</td>
<td>√</td>
<td>√</td>
<td>×</td>
<td>√</td>
</tr>
<tr>
<td>pre-wrap</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>pre-line</td>
<td>√</td>
<td>×（合并）</td>
<td>√</td>
<td>√</td>
</tr>
</tbody>
</table>
<h2 id="word-break"><a href="#word-break" class="headerlink" title="word-break"></a>word-break</h2><p>从这个名字可以知道，<strong>这个属性是控制单词如何被拆分换行的</strong>。它有三个值：<code>normal | break-all | keep-all</code>。</p>
<p><code>word-break:keep-all</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-break_keep-all.png" width="355">
<p><strong>所有“单词”一律不拆分换行</strong>，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为<strong>只有空格可以触发自动换行</strong></p>
<p><code>word-break:break-all</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-break_break-all.png" width="320">
<p><strong>所有单词碰到边界一律拆分换行</strong>，不管你是<code>incomprehensibilities</code>这样一行都显示不下的单词，还是<code>long</code>这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用<code>word-break:break-all</code>时要慎重呀。<br>这样的效果好像并不太好呀，能不能就把incomprehensibilities拆一下，其它的单词不拆呢？那就需要下面这个属性了：</p>
<h2 id="word-wrap（overflow-wrap）"><a href="#word-wrap（overflow-wrap）" class="headerlink" title="word-wrap（overflow-wrap）"></a>word-wrap（overflow-wrap）</h2><p><code>word-wrap</code>又叫做<code>overflow-wrap</code>：</p>
<blockquote>
<p>word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。 </p>
</blockquote>
<p><strong>这个属性也是控制单词如何被拆分换行的</strong>，实际上是作为<code>word-break</code>的互补，它只有两个值：<code>normal | break-word</code>，那我们看下<code>break-word</code>：</p>
<img src="/2018/08/31/彻底搞懂white-space、word-break、word-wrap/word-wrap_break-word.png" width="320">
<p>终于达到了上文我们希望的效果，<strong>只有当一个单词一整行都显示不下时，才会拆分换行该单词</strong>。<br>所以我觉得<code>overflow-wrap</code>更好理解好记一些，overflow，只有长到溢出的单词才会被强制换行！</p>
<p>（其实前面的<code>word-break</code>属性除了列出的那三个值外，也有个<code>break-word</code>值，效果跟这里的<code>word-wrap:break-word</code>一样，然而只有Chrome、Safari等部分浏览器支持）</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>最后总结一下三个属性</p>
<ul>
<li>white-space，<strong>控制空白字符的显示</strong>，同时还能控制是否自动换行。它有五个值：<code>normal | nowrap | pre | pre-wrap | pre-line</code></li>
<li>word-break，<strong>控制单词如何被拆分换行</strong>。它有三个值：<code>normal | break-all | keep-all</code></li>
<li>word-wrap（overflow-wrap）<strong>控制长度超过一行的单词是否被拆分换行</strong>，是<code>word-break</code>的补充，它只有两个值：<code>normal | break-word</code></li>
</ul>
<p>相信读完了本文，你应该对white-space、word-break、word-wrap有比较系统的认识了吧，如果短时间还是记不住，常看一看就能记住的~</p>
<p><br></p>
<p>下面是本文里所有例子的代码的地址，每个属性做成了选项，方便操作学习~</p>
<iframe id="cp_embed_jvyrWK" src="//codepen.io/YGYOOO/embed/jvyrWK?height=400&theme-id=dark&slug-hash=jvyrWK&default-tab=html,result" scrolling="no" frameborder="no" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;"></iframe>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2018/08/31/彻底搞懂white-space、word-break、word-wrap/" data-id="cjt066zfq0004e0z4gpkkl8vk" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/css-white-space-word-break-word-wrap-html/">css,white-space,word-break,word-wrap,html</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2018/09/04/彻底搞懂https的加密机制/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          彻底搞懂HTTPS的加密机制
        
      </div>
    </a>
  
  
    <a href="/2018/08/28/JavaScript-使用WeakMap创建私有属性/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaScript-使用WeakMap创建对象的私有属性</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTTPS-SSL-TLS-加密-对称加密-非对称加密-数字证书-数字签名/">HTTPS,SSL,TLS,加密,对称加密,非对称加密,数字证书,数字签名</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript-WeakMap-ES6/">JavaScript,WeakMap,ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css-white-space-word-break-word-wrap-html/">css,white-space,word-break,word-wrap,html</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/immutable-js-immutable-JavaScript-持久化数据结构-结构共享-Vector-Trie-Clojure/">immutable.js,immutable,JavaScript,持久化数据结构,结构共享,Vector Trie,Clojure</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/immutable-js-immutable-JavaScript-持久化数据结构-结构共享-bitmap-transient-hash冲突-Vector-Trie-Clojure/">immutable.js,immutable,JavaScript,持久化数据结构,结构共享,bitmap,transient,hash冲突,Vector Trie,Clojure</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/尾递归-尾调用-trampoline-递归-迭代/">尾递归,尾调用,trampoline,递归,迭代</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/HTTPS-SSL-TLS-加密-对称加密-非对称加密-数字证书-数字签名/" style="font-size: 10px;">HTTPS,SSL,TLS,加密,对称加密,非对称加密,数字证书,数字签名</a> <a href="/tags/JavaScript-WeakMap-ES6/" style="font-size: 10px;">JavaScript,WeakMap,ES6</a> <a href="/tags/css-white-space-word-break-word-wrap-html/" style="font-size: 10px;">css,white-space,word-break,word-wrap,html</a> <a href="/tags/immutable-js-immutable-JavaScript-持久化数据结构-结构共享-Vector-Trie-Clojure/" style="font-size: 10px;">immutable.js,immutable,JavaScript,持久化数据结构,结构共享,Vector Trie,Clojure</a> <a href="/tags/immutable-js-immutable-JavaScript-持久化数据结构-结构共享-bitmap-transient-hash冲突-Vector-Trie-Clojure/" style="font-size: 10px;">immutable.js,immutable,JavaScript,持久化数据结构,结构共享,bitmap,transient,hash冲突,Vector Trie,Clojure</a> <a href="/tags/尾递归-尾调用-trampoline-递归-迭代/" style="font-size: 10px;">尾递归,尾调用,trampoline,递归,迭代</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">October 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/09/">September 2018</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/08/">August 2018</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/03/04/写了一个可以拦截ajax请求并修改返回结果的插件/">写了一个可以拦截ajax请求并修改返回结果的chrome插件</a>
          </li>
        
          <li>
            <a href="/2018/10/17/Javascript的尾递归及其优化/">Javascript的尾递归及其优化</a>
          </li>
        
          <li>
            <a href="/2018/09/19/深入探究immutable.js的实现机制（二）/">深入探究immutable.js的实现机制（二）</a>
          </li>
        
          <li>
            <a href="/2018/09/12/深入探究immutable.js的实现机制（一）/">深入探究immutable.js的实现机制（一）</a>
          </li>
        
          <li>
            <a href="/2018/09/04/彻底搞懂https的加密机制/">彻底搞懂HTTPS的加密机制</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 顾伊凡<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>